Vue
		.component(
				"show_big_img",
				{
					data : function() {
						return {
							is_move:false,
							new_x:null,
							new_y:null,
							img_src:null,
						};
					},
					template : loadHTML("components/show_big_img_comp/show_big_img.html"),
					ready : function() {
						
						
//						$(".bigimg").attr("onload",function(){
//							this.initPosition(images[0]);
//							this.changeImg(images[0], 1);
//						}.bind(this));
						
						//var isMove = false;
//						var new_x;
//						var new_y;
//						$(".img").mousedown(function(e) {
//							console.log("拖动");
//							isMove = true;
//							this.new_x = e.clientX - this.offsetLeft;
//							this.new_y = e.clientY - this.offsetTop;
//							//this.setCapture && this.setCapture();
//							return false;
//
//						});
//						$(".img").mousemove(function(e1) {
//							if (this.isMove) {
//								var e1 = e1 || window.event;
//								$(".img").css("left", e1.clientX - new_x);
//								$(".img").css("top", e1.clientY - new_y);
//							}
//						}).mouseup(function(e) {
//							isMove = false;
//
//							e.cancelBubble = true;
//						});

						

							

						

						
						
						
						
						var scrollFunc = function(e) {
							
							times = 1;
							if (e.wheelDelta) {// IE/Opera/Chrome

								if (e.wheelDelta > 0) {

									times += 0.05;
									this.toBigImg($(".bigimg")[0], times);
									this.initPosition($(".bigimg")[0]);
									
									console.log(times);
								} else {

									times -= 0.05;

									this.toSmallImg($(".bigimg")[0], times);
									this.initPosition($(".bigimg")[0]);
									console.log(times);
								}
							} else if (e.detail) {// Firefox
								console.log(e.detail);
							}
						}.bind(this);

						var doc = document
								.getElementsByClassName("image_content")[0];
						if (doc.addEventLitener) {
							doc.addEventListener('DOMMouseScroll', scrollFunc,
									false);
						}
						doc.onmousewheel = doc.onmousewheel = scrollFunc;
					},
					methods : {
						init:function(data){
							$('.ui.basic.modal').modal('show',true);
							times = 1;
							this.img_src=data.img_src;
							var times = 1;
							var images = $(".bigimg");
							
		
							images[0].onload=function(){
								//确保图片加载完毕
								this.initPosition(images[0]);
								this.changeImg(images[0], 1);
							}.bind(this);
							
						},
						changeImg : function(imgObj, b) {
							var max = 550 * b;
							
							console.log("最大高度：" + max);
							console.log("当前图片高度："+imgObj.height+"当前图片宽度："+imgObj.width);
							
							
							
							console.log(imgObj.width);
							if (imgObj.width >= imgObj.height
									&& imgObj.width > max) {
								var wlRate = imgObj.height / imgObj.width;

								console.log("超宽");
								// var rate = max/imgObj[0].width;
								imgObj.width = max;
								imgObj.height = max * wlRate;
								console.log(wlRate);
								console.log(imgObj.width);
								console.log(imgObj.height);
								return;
							}
							if (imgObj.height >= imgObj.width
									&& imgObj.height > max) {

								console.log("超高" + imgObj.height);
								var wlRate = imgObj.width / imgObj.height;

								imgObj.height = max;
								// var rate = max/imgObj[0].height;
								console.log(wlRate);
								imgObj.width = max * wlRate;
								return;
							}
						},
						toSmallImg : function(imgObj, times) {
							if (imgObj.width <= 30 || imgObj.height <= 30) {
								imgObj.width = 31;
								imgObj.height = 31;
								return;
							}
							imgObj.width = imgObj.width * times;
							imgObj.height = imgObj.height * times;
						},
						toBigImg : function(imgObj, times) {
							if (imgObj.width >= 2001 || imgObj.height >= 2001) {
								imgObj.width = 2000;
								imgObj.height = 2000;
								return;
							}
							imgObj.width = imgObj.width * times;
							imgObj.height = imgObj.height * times;
						},
						initPosition : function(imgObj) {
							var clientWidth = $(window).width();
							var clientHeight = $(window).height();
							console.log(clientWidth + " " + clientHeight);

							var left = clientWidth - imgObj.width > 0 ? (clientWidth - imgObj.width) / 2
									: 0;
							var top = clientHeight - imgObj.height > 0 ? (clientHeight - imgObj.height) / 2
									: 0;
							$(imgObj).css("left", left + "px");
							$(imgObj).css("top", top + "px");
						},
						mousedown:function(e) {
							
							this.is_move = true;
							
							this.new_x = e.clientX - $(".bigimg")[0].offsetLeft;
							this.new_y = e.clientY - $(".bigimg")[0].offsetTop;
//							this.new_x = e.clientX - document.getElememtsByClassName("bigimg")[0].offsetLeft;
//							this.new_y = e.clientY - document.getElememtsByClassName("bigimg")[0].offsetTop;
							this.setCapture && this.setCapture();
							console.log($(".bigimg")[0].offsetLeft);
							console.log("按下："+this.is_move+"  "+this.new_x+"   "+this.new_y);
							return false;

						},
						mousemove:function(e1) {
							
							if (this.is_move) {
								var e1 = e1 || window.event;
								$(".bigimg").css("left", e1.clientX - this.new_x);
								$(".bigimg").css("top", e1.clientY - this.new_y);
								console.log("拖动："+this.is_move+"  "+this.new_x+"   "+this.new_y);
							}
							
						},
						mouseup:function(e) {
							
							this.is_move = false;
							console.log("释放："+this.is_move+"  "+this.new_x+"   "+this.new_y);
							e.cancelBubble = true;
						},
						close:function(){
							
							this.new_x=null;
							this.new_y=null;
							this.img_src=null;
							this.is_move=false;
						},
						
					},
				});